<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            display: block;
            width: 55px;
            height: 27px;
            background-image: url('./resourse/08img/bottom.png');
        }

        a:hover {
            background-position: -55px 0;
        }

        a:active {
            background-position: -110px 0;
        }

        /* 解决图片闪烁
      将多个图片统一保存到一个大的图片中，然后通过调整background-position位置切换显示的图片
      这样图片会同时加载到网页中可以避免图片闪烁的问题
     CSS-Sprite  俗称雪碧图

     雪碧图的步骤
         1.确定使用图标
         2.测量图标大小
         3.根据测量结果创建一个元素
         4.将雪碧图·设置为背景图片
         5.设置偏移量显示正确图片

         雪碧图特点
         一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验
         


  */
    </style>
</head>

<body>
    <a href="#"></a>
</body>

</html>